<template>
  <div class="bloghome-container">
    <header class="bloghome-container-header">
      <Header></Header>
    </header>
    <main class="bloghome-container-main">
      <!-- 左侧内容模块 -->
      <section class="bloghome-container-left">
        <!-- 轮播图 -->
        <Swiper></Swiper>
        <!-- 内容 -->
        <Main :article-info="articleData"></Main>
        <!-- 分页 -->
        <el-pagination class="pag" background layout="total, prev, pager, next" :page-count="pageCount" :page-size="pageSize" :total="pageTotal" :current-page="currentPage" @current-change="handleCurrentChange"> </el-pagination>
      </section>
      <!-- 右侧导航栏 -->
      <!-- 后期优化，将右侧侧边栏组件化 -->
      <aside class="bloghome-container-right">
        <Aside class="login-module">
          <template #header>
            <div></div>
          </template>
          <template #main>
            <div>
              <keep-alive>
                <component :is="comName" @shareNewInfo="getNewInfo" :newUserInfo="newUserInfo" @logoutInfo="getLogoutInfo"></component>
              </keep-alive>
            </div>
          </template>
          <template #footer>
            <div></div>
          </template>
        </Aside>
        <!-- 简介模块 -->
        <Aside class="info">
          <template #header>
            <div class="aside-header aside-fs">博客介绍</div>
            <ul>
              <li>
                <p>博客因兴趣诞生,在不断完善中。</p>
              </li>
              <li>
                <p>本博客相当于一个技术论坛。</p>
              </li>
              <li>
                <p>用户登录后可以发表博文。</p>
              </li>
            </ul>
          </template>
          <template #main>
            <div class="aside-main aside-fs">
              <span class="aside-main-item">
                <a href="#">
                  <div class="aside-item-fs">文章</div>
                  <div class="aside-item-number">{{ articlesCount }}</div>
                </a>
              </span>
              <span class="aside-main-item">
                <a href="#">
                  <div class="aside-item-fs">分类</div>
                  <div class="aside-item-number">{{ tagsCount }}</div>
                </a>
              </span>
            </div>
          </template>
          <template #footer> </template>
        </Aside>
        <!-- 公告模块 -->
        <Aside class="notice">
          <template #header>
            <div class="aside-header aside-fs">简介</div>
          </template>
          <template #main>
            <div class="">欢迎参观┗|｀O′|┛ 嗷~~</div>
          </template>
        </Aside>
        <!-- 活跃用户模块 -->
        <FriendsAside class="friends"></FriendsAside>
      </aside>
    </main>
    <!-- <Footer></Footer> -->
  </div>
</template>

<script>
import Header from '@/components/Header'
import Swiper from '@/components/Swiper'
import Aside from '@/components/Aside'
import Main from '@/components/Main'
import Tabs from '@/components/Tabs'
import UserModule from '@/components/UserModule'
import FriendsAside from '@/components/Asides/FriendsAside'
// import eventBus from '@/plugins/eventBus'

export default {
  name: 'BlogHome',
  data () {
    return {
      articleData: [],
      // 文章总数
      articlesCount: 1,
      tagsCount: 1,
      // Tabs,UserModule
      comName: 'Tabs',
      newUserInfo: {},
      // 当前页数
      currentPage: 1,
      pageCount: 1,
      pageTotal: 1,
      pageSize: 10
    }
  },
  components: {
    Header,
    Swiper,
    Aside,
    Main,
    Tabs,
    UserModule,
    FriendsAside
  },
  methods: {
    // 初始化文章数据
    async initArticlesInfo (val) {
      const res = await this.$api.articleInfo({
        params: val
      })
      // console.log(res)
      this.articleData = res.data.data
      for (let i = 0; i < this.articleData.length; i++) {
        this.articleData[i].created_time = this.$forMat(this.articleData[i].created_time)
        this.articleData[i].last_modified_time = this.$forMat(this.articleData[i].last_modified_time)
      }
      // 文章总数
      this.articlesCount = res.data.count
      // 总页数
      this.pageCount = res.data.pagecount
      // 总条数
      this.pageTotal = res.data.count
      // 每页显示条数
      this.pageSize = res.data.pagesize
      // console.log(this.articleData)
    },
    // 获取所有标签
    async getAllTag () {
      // var tagsId = '620e68060b9c57ca141d8933'
      // tagsId = parseInt(tagsId)
      // console.log(tagsId)
      const res = await this.$api.getAllTags()
      this.tagsCount = res.data.data.tags.length
      // console.log(res)
    },
    // 侧边栏登录模块以及用户数据模块的判断
    getNewInfo (val) {
      setTimeout(() => {
        this.comName = val.comName
      }, 100)
      this.newUserInfo = val.userInfo
      // console.log(val)
    },
    // 退出登录信息
    getLogoutInfo (val) {
      // console.log(val)
      setTimeout(() => {
        this.comName = val
      }, 100)
    },
    // 头部信息
    getHeaderInfo (val) {
      console.log(val)
      this.comName = val
    },
    // 分页数改变触发
    async handleCurrentChange (val) {
      // console.log('val=' + val)
      const res = await this.$api.articleInfo({ page: val })
      this.articleData = res.data.data
      console.log(res)
    }
  },
  created () {
    this.initArticlesInfo()
    this.getAllTag()
    console.log(this.$route.params.username)
    if (this.$route.params.username == undefined) {
      this.comName = 'Tabs'
    } else {
      this.comName = 'UserModule'
    }
    // eventBus.$on('shareComName', this.getComName)
  },
  mounted () {
    // this.getHeaderInfo()
  },
  beforeDestroy () {
    // eventBus.$off('shareComName', this.getComName)
  }
}
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  // height: 100%;
}
.bloghome-container {
  width: 100%;
  // height: 100%;
  background-image: -moz-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: -webkit-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
}
.bloghome-container-main {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  // min-height: 500px;
  margin: 0 auto;
}
.bloghome-container-left {
  width: 75%;
  margin-right: 15px;
}
.bloghome-container-right {
  width: 25%;
}
.aside-header {
  display: block;
}
.aside-main {
  display: flex;
  margin: 0.7rem 0 0.2rem;
  width: 100%;
  justify-content: center;
}
.aside-main-item {
  flex: 1;
  text-align: center;
  margin: 0 3px;
  white-space: nowrap;
}
.aside-item-fs {
  font-size: 16px;
  color: black;
}
.aside-item-number {
  font-size: 17px;
  color: black;
  font-weight: 700;
}
.aside-fs {
  font-size: 18px;
}
.aside-footer {
  display: block;
  margin-top: 0.7rem;
  background-color: rgb(72, 72, 255);
  color: #fff;
  text-align: center;
  line-height: 2.4;
}
.login-module {
  display: flex;
  flex-direction: column;
  padding: 20px 15px;
}
.info,
.notice,
.friends {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  margin-top: 15px;
}
.info {
  padding: 20px 15px;
  align-items: center;
}
.notice {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 0.5rem;
}

.friends {
  padding: 20px 15px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pag {
  float: right;
  // margin-top: 10px;
  // position: absolute;
  // top: 50%;
  // right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>
